import { defineConfig } from 'windicss/helpers'
import formsPlugin from 'windicss/plugin/forms'
import Typography from 'windicss/plugin/typography'

export default defineConfig({
  darkMode: 'class',
  attributify: true, // Attributify Mode
  extract: {
    include: ['src/**/*.{vue,html,jsx,tsx}'],
    exclude: ['node_modules', '.git'],
  },
  plugins: [formsPlugin, Typography],
  // safelist: 'p-3 p-4 p-5',
  theme: {
    extend: {
      colors: {
        teal: {
          100: '#096',
        },
        blue: {
          500: '#2563eb',
        },
      },
      backgroundColor: {
        primary: 'rgba(var(--primary), var(--tw-bg-opacity))',
      },
      textColor: {
        primary: 'rgba(var(--primary), var(--tw-text-opacity))',
      },
      fontFamily: {
        bebas: ['"Bebas Neue"', 'sans-serif'],
      },
    },
  },
  // 使用方法 <div class="*hstack">
  alias: {
    hstack: 'flex items-center',
    vstack: 'flex flex-col',
    icon: 'w-6 h-6 fill-current',
    app: 'text-red-500',
    'app-border': 'border-gray-200 dark:border-dark-300',
  },
  //  使用方法 <div class="btn hover:btn-green">hello world</div>
  shortcuts: {
    btn: 'py-2 px-4 font-semibold rounded-lg shadow-md',
    'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  },
})
